<template>
	<div>
		<div class="container">
			<!--
			<div class="toolbar mt-2">
				<a-form ref="searchRef" layout="inline" :label-col="{style: { width: '100px' }}" :model="searchState" @finish="current=1;loading=true;initData()">
					<a-row :gutter="20">
						<a-col style="padding: 10px 0;" :span="8">
							<a-form-item label="选择项目">
								<a-select v-model:value="searchState.project_id" :show-search="true" placeholder="请选择" :options="projectlist" option-filter-prop="label"></a-select>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="8">
							<a-form-item label="选择物资分类">
								<a-select v-model:value="searchState.material_type" :show-search="true" placeholder="请选择" :options="mtypelist" option-filter-prop="label"></a-select>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="8">
							<a-form-item label="选择物资">
								<a-select v-model:value="searchState.material_id" :show-search="true" placeholder="请选择" :options="materiallist" option-filter-prop="label"></a-select>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="6">
							<a-form-item>
								<a-space>
									<a-button type="primary" html-type="submit">
										<search-outlined />搜索
									</a-button>

									<a-button @click="router.push('uselog/create')">
										<plus-outlined />添加
									</a-button>
								</a-space>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>

			<div class="toolbar mt-2">
				<a-form ref="searchRef" layout="inline" :label-col="{style: { width: '100px' }}" :model="searchState" @finish="current=1;loading=true;initData()">
					<a-row :gutter="20">
						<a-col style="padding: 10px 0;" :span="8">
							<a-form-item label="选择项目">
								<a-select v-model:value="searchState.project_id" :show-search="true" placeholder="请选择" :options="projectlist" option-filter-prop="label"></a-select>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="8">
							<a-form-item label="选择物资分类">
								<a-select v-model:value="searchState.material_type" :show-search="true" placeholder="请选择" :options="mtypelist" option-filter-prop="label"></a-select>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="8">
							<a-form-item label="选择物资">
								<a-select v-model:value="searchState.material_id" :show-search="true" placeholder="请选择" :options="materiallist" option-filter-prop="label"></a-select>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="4">
							<a-form-item>
								<a-space>
									<a-button type="primary" html-type="submit">
										<search-outlined />搜索
									</a-button>
								</a-space>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>-->

			<div class="toolbar mt-2">
				<h2 style="text-align: center;">{{ projectName }}库存统计表</h2>
				<a-form ref="searchRef" layout="inline" :label-col="{style: { width: '100px' }}" :model="searchState" @finish="current=1;loading=true;initData()">
					<a-row style="width:100%;" :gutter="20">
						<a-col style="padding: 10px 0;" :span="5">
							<a-form-item label="验收类型">
								<a-select v-model:value="searchState.ys_type" :show-search="true" placeholder="请选择" :options="yslist" option-filter-prop="label" allow-clear></a-select>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="6">
							<a-form-item label="物料名称">
								<!--
								<a-select v-model:value="searchState.material_id" :show-search="true" placeholder="请选择" :options="materiallist" option-filter-prop="label"></a-select>-->
								<a-input v-model:value="searchState.material_name" placeholder="请输入" allow-clear></a-input>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="3">
							<a-form-item>
								<a-space>
									<a-button type="primary" html-type="submit">
										<search-outlined />搜索
									</a-button>
								</a-space>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>

			<div class="mt-2">
				<!--
				v-if="!loading"使得:default-expand-all-rows="true"生效
				-->
				<a-table v-if="!loading" :columns="columns" :scroll="tableScroll" row-key="id" children-column-name="children" :default-expand-all-rows="false" :data-source="psSource" :pagination="pagination" :loading="loading" @change="initData">
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'flowStatus'">
							<div>
								<flow-model :module-id="'planjx'" :item-id="record.id" @change="changeFlowStatusData2"></flow-model>
							</div>
						</template>
					</template>
				</a-table>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, computed, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
const projectlist = ref([]);
const mtypelist = ref([]);
const materiallist = ref([]);
const { proxy } = getCurrentInstance();
import dayjs from "dayjs";

import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, RightOutlined } from "@ant-design/icons-vue";

import { post } from "../utils";

import { usePagination } from "vue-request";

const searchRef = ref();
const searchState = reactive({});
const projectName = ref("");

mtypelist.value = [
	{ label: "主要材料", value: 2 },
	{ label: "周转材料", value: 57 },
	{ label: "机械类", value: 61 }
];
post("material", { page_size: 3000 }).then(({ data }) => {
	materiallist.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
const yslist = [
	{ value: 1, label: "钢筋" },
	{ value: 2, label: "混凝土" },
	{ value: 3, label: "周转材料" },
	{ value: 4, label: "机械" },
	{ value: 5, label: "其它" },
	{ value: 6, label: "辅助材料" }
];
const columns = [
	{
		title: "ID",
		dataIndex: "id",
		key: "id",
		width: 100,
		align: "left",
		fixed: "left"
	},
	// {
	// 	title: "项目名称",
	// 	dataIndex: "project",
	// 	sorter: false,
	// 	width: 150,
	// 	ellipsis: true,
	// 	fixed: "left",
	// 	customRender: ({ text, record, index, column }) => {
	// 		return text.name;
	// 	}
	// },
	{
		title: "验收类型",
		dataIndex: "ys_type",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left",
		customRender: ({ text, record, index, column }) => {
			if (!text) return text;
			return yslist.filter(ys => ys.value === text)[0]?.label;
		}
	},
	{
		title: "物资名称",
		dataIndex: "material",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left",
		customRender: ({ text, record, index, column }) => {
			//未设置dataIndex，text和record返回值相同
			return text.name;
		}
	},
	{
		title: "型号规格",
		dataIndex: "model",
		sorter: false,
		width: 150,
		align: "center"
	},
	{
		title: "单位",
		dataIndex: "unit",
		sorter: false,
		width: 150,
		align: "center"
	},
	{
		title: "库存数量",
		dataIndex: "quantity",
		sorter: false,
		width: 150,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return parseInt(text) === parseFloat(text) ? parseInt(text) : text;
		}
	}
];
const tableScroll = computed(() => ({
	x: document.documentElement.clientWidth - 650
}));
const route = useRoute();
const project_id = route.params.id;
const { data, loading, run, current, pageSize, total } = usePagination(params => post("projectstock", { project_id: project_id, ...params, ...searchState }), {
	defaultParams: [
		{
			page_size: 10
		}
	],
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});

const psSource = computed(() => {
	if (data.value?.data.length) {
		projectName.value = data.value.data[0].project.name;
	}
	return (data.value?.data || []).map(d => {
		if (d.children?.length === 0) delete d.children;
		return d;
	});
});

const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = { ...filters, ...searchState };

	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};

const router = useRouter();
</script>
<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}
</style>
